<template>
  <view class="pages">
    <nav-bar title='联系客服' titleSize='14' :backBtn='false'></nav-bar>
    <view class="service jh-flex-center jh-column">
      <view class="service-avatar jh-flex-center">
        <image style="width: 158px;height: 158px;display: block;" :src="ossDomain + '/server-avatar.png'"></image>
      </view>
      <view class="jh-flex-center" style="margin-top: 24px;">
        <view class="jh-flex-center jh-column" @touchstart='audioTap = true' @tap="getStaff(1)" @touchend="audioTap = false">
          <image style="width: 44px;height: 44px;display: block;" :src="ossDomain + '/icon-audio'+(audioTap ? '-a' : '')+'.png'"></image>
          <view class="font-11 jh-line-height padding-t5" :style="{color: audioTap ? '#008399' : '#B5B5B6'}">语音通话</view>
        </view>
        <view class="jh-flex-center jh-column" style="margin-left: 83px;" @touchstart='videoTap = true' @tap="getStaff(2)" @touchend="videoTap = false">
          <image style="width: 44px;height: 44px;display: block;" :src="ossDomain + '/icon-video'+(videoTap ? '-a' : '')+'.png'"></image>
          <view class="font-11 jh-line-height padding-t5" :style="{color: videoTap ? '#008399' : '#B5B5B6'}">视频通话</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // #ifdef APP-PLUS
    const dcRichAlert = uni.requireNativePlugin('TENCENT-CALL');
  // #endif
  import { getRandomInt } from '@/utils/index.js'
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
        audioTap: false,
        videoTap: false
      }
    },
    computed: {
      ...mapState({
        rtcConfig: state => state.global.rtcConfig,
      }),
    },
    methods: {
      getStaff (type) {
        this.$http.getStaff({type: 1}).then(res => {
          let to = res.data.tencent_user_id
          // #ifndef APP-PLUS
            return uni.showToast({
              title: '无法呼叫客服',
              icon: 'none'
            })
          // #endif
          uni.$emit("call", {
            type: 1,
            user: to,
            calltype: type,
          });
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding-right: 30px;
  }
  .service{
    width: 100%;
    height: calc(100vh - 50px);
    &-avatar{
      width: 168px;
      height: 168px;
      background-color: #fff;
      border-radius: 50%;
    }
  }
</style>
